import React from 'react';
import { Table, Tag } from 'antd';
import timeFormat from 'utils/time';
import { listHistory } from 'services/history';
import { defaultRejectHandler } from 'utils/http';


export default class MonitorList extends React.Component {
  constructor() {
    super();
    this.state = {
      dataSource: [],
      loading: true,
    };
  }

  componentDidMount() {
    listHistory().then((data) => {
      const newData = Object.values(data).flat();
      this.setState({ dataSource: newData, loading: false });
    }, defaultRejectHandler);
  }

  render() {
    const { dataSource, loading } = this.state;
    const columns = [
      {
        title: '流程名称',
        dataIndex: 'processName',
        key: 'processName',
      },
      {
        title: '创建人',
        dataIndex: 'owner',
        key: 'owner',
      },
      {
        title: '开始时间',
        dataIndex: 'start',
        key: 'start',
        render: timeFormat,
        defaultSortOrder: 'descend',
        sorter: (a, b) => a.start > b.start,
      },
      {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (tag) => {
          const color = tag === 0 ? 'green' : 'geekblue';
          const value = tag === 0 ? '运行中' : '已完成';
          return (
            <Tag color={color} key={tag}>
              {value}
            </Tag>
          );
        },
      },
    ];
    return (
      <Table
        loading={loading}
        columns={columns}
        dataSource={dataSource}
        size="middle"
        rowKey="id"
        onRow={(record) => ({
          onClick: () => {
            const { history } = this.props;
            const { id, process, processName } = record;
            const search = `?id=${id}&processId=${process}&processName=${processName}`;
            history.push({ pathname: 'monitor/detail', search });
          }, // 点击行
        })}
      />
    );
  }
}
